<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area">
      <lottery-box-only
        class="lottery-box-adjust" 
        v-for="item in getCurrentLotteryState" 
        :item="item"
        @click="handleUpdateData"
        :key="item.id">
      </lottery-box-only>
    </div>
  </div>
  <div class="number-select-phone" v-else>
    <div class="number-select-area">
      <lottery-box-flow-phone
        class="lottery-box-adjust" 
        v-for="item in getCurrentLotteryState" 
        :item="item"
        @click="handleUpdateData"
        :key="item.id">
      </lottery-box-flow-phone>
    </div>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxOnly from '@/components/lottery-type/common/lottery-box-only'
import LotteryBoxFlowPhone from '@/components/lottery-type/common/lottery-box-flow-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    LotteryBoxOnly,
    LotteryBoxFlowPhone
  },
  data() {
    return {
      instruction: '当期开出的最后一位号码为特码',
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .lottery-box-adjust >>> .box-top 
    color #fff
  .lottery-box-adjust >>> .box 
    &.grey
      &.active 
        border 1px solid $color-ball-grey 
        background rgba($color-ball-grey, 0.102) 
        .box-top 
          color $color-sub-grey
          background none
        .box-bottom 
          color $color-sub-grey
      .box-top 
        background $color-sub-grey
    &.red 
      &.active 
        border 1px solid $color-ball-red 
        background rgba($color-ball-red, 0.102) 
        .box-top 
          color $color-ball-red
          background none
        .box-bottom 
          color $color-ball-red 
      .box-top 
        background $color-ball-red
    &.blue 
      &.active
        border 1px solid $color-ball-blue
        background rgba($color-ball-blue, 0.102)   
        .box-top 
          color $color-ball-blue
          background none 
        .box-bottom 
          color $color-ball-blue   
      .box-top 
        background $color-ball-blue
    &.green 
      &.active
        border 1px solid $color-ball-green 
        background rgba($color-ball-green, 0.102) 
        .box-top 
          color $color-ball-green
          background none  
        .box-bottom 
          color $color-ball-green  
      .box-top 
        background $color-ball-green

  .lottery-box-adjust >>> .box-bottom 
    display none
    transition all 0.5s ease
  .lottery-box-adjust >>> .active
    .box-bottom 
      display block
      transition all 0.5s ease
  .lottery-box-adjust >>> .active 
    .box-bottom 
      display block
      transition all 0.5s ease
  .lottery-box-adjust >>> .active
    .box-bottom 
      display block
      transition all 0.5s ease
  .lottery-box-adjust >>> .active 
    .box-bottom 
      display block
      transition all 0.5s ease
</style>